<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
	<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css" />
	<link type="text/css" rel="stylesheet" href="css/app.css" />
	<script src="js/jquery-2.1.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/videopage.js"></script>
	<title>451 Template</title>
</head>
<body>
	<div class="container">
		<div class="row page-header">
			<div class="col-md-2 logo">
				<h2>SIGNPORT</h2>	
			</div>
			<div class="col-md-10" class="search_bar">
				<form>
					<input type="search" class="form-control" placeholder="Search..."></input>
				</form>
			</div> 
		</div>
		<div class="row">
			<div class="col-md-2 menu_bar">
				<table>
					<tr>
						<td><a href="http://9gag.com/">Main Page</a></td>
					</tr>
					<tr>
						<td> <a href="http://9gag.com/"> Profile</a></td>
					</tr>
					<tr>
						<td><a href="http://9gag.com/">Notifications</a></td>
					</tr>
					<tr>
						<td><a href="http://9gag.com/">Add Video</a></td>
					</tr>
					<tr>
						<td><a href="http://9gag.com/">Forum</a></td>
					</tr>
					<tr>
					<td><a href="http://9gag.com/">How to use?</a></td>
					</tr>
					<tr>
						<td><a href="http://9gag.com/">FAQ</a></td>
					</tr>
					<tr>
						<td><a href="http://9gag.com/">About us</a></td>
					</tr>
					<tr>
						<td><a href="http://9gag.com/">Log out</a></td>
					</tr>
				</table>
			</div>
			<div class="col-md-6 video_bar">
				
				<h3>Video Name</h3>
				<div class="video_frame">
					video will come here
				</div>
				<div class="form-group video_buttons">
    					<div class="col-sm-offset-2 col-sm-10">
    						
      						<button class="btn btn-default">REPORT!</button>
      						
      						<button class="btn btn-default"><label>2</label> LIKEs</button>
      						
    					</div>
  				</div>
  				
				<h3>Comments</h3>
				<textarea id="comment"></textarea>
				<p><input type="submit" id="comment-btn" class="btn btn-default yellow_button" value="Upload"/></p>
				<p id="comment-error-message" style="display:none;"><strong> Empty Comment!</strong></p>
				<ul id="comments">
					<li> <h4>By Author1</h4> 
					Comment1
					</li>
					<li> <h4>By Author2</h4> 
					Comment2
					</li>
				</ul>
			</div>
			<div class="col-md-4 desc_bar">
				
				<h4>Description</h4>
				<div class="desc_frame">
					description will come here
				</div>
				<h4>Tags</h4>
				<h3> Recommended Videos</h3>
						<div class="recommendation_list">
						
						<a href="#" class="list-group-item">Video 1</a> 
						<a href="#" class="list-group-item">Video 2</a> <a href="#" class="list-group-item">Video 3</a> <a href="#" class="list-group-item">Video 4</a> <a href="#" class="list-group-item">Video 5</a> <a href="#" class="list-group-item">Video 6</a> <a href="#" class="list-group-item">Video 7</a> <a href="#" class="list-group-item">Video 8</a> <a href="#" class="list-group-item">Video 9</a> <a href="#" class="list-group-item">Video 10</a>
					</div>
			</div>
		</div>
	</div>

</body>
</html>